//定义游戏需要的数据。

//单元格宽度，以像素为单位
var grid = 16;

// 蛇
var snake = {
    // 初始位置
    x: 160,
    y: 160,
    // 移动速度和方向。
    dx: grid,
    dy: 0,
    // 各个节点的坐标。
    cells: [],
    // 长度。
    maxCells: 4
};

// 程序主循环
function loop() {

    // 清理画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 计算新的节点的坐标。
    snake.x += snake.dx;
    snake.y += snake.dy;
    // 增加到头头部
    snake.cells.unshift({
        x: snake.x,
        y: snake.y
    });
    // 如果maxCells没有增加，也就是没有生长，尾部节点就会被删除
    if (snake.cells.length > snake.maxCells) {
        snake.cells.pop();
    }

    // 绘制蛇
    context.fillStyle = 'green';
    // 画每一个节点，节点间有1个像素的间隙
    for (var i = 0; i < snake.cells.length; i++) {
        context.fillRect(snake.cells[i].x, snake.cells[i].y, grid - 1, grid - 1);
    };
}

// 处理键盘按键
function onKeyDown(key) {
    // 上下左右键，改变方向，但不能掉头
    // left arrow key
    if (keyEvent.key == "ArrowLeft" && dx === 0) {
        dx = -grid;
        dy = 0;
    }
    // up arrow key
    else if (keyEvent.key == "UpLeft" && dy === 0) {
        dy = -grid;
        dx = 0;
    }
    // right arrow key
    else if (keyEvent.key == "RightLeft" && dx === 0) {
        dx = grid;
        dy = 0;
    }
    // down arrow key
    else if (keyEvent.key == "DownLeft" && dy === 0) {
        dy = grid;
        dx = 0;
    }
}

// 从这里开始执行
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

// 设置键盘监听
document.addEventListener('keydown', onKeyDown);

// 计时器，游戏开始
var timer = setInterval(loop, 1000 / 5);
